<template>
 <div class="hospital">

     <el-card class="box-card"  v-for="(item,index) in hospitalArr" :key="item.id" shadow="hover">

         <div class="card" @click="goDetail(item)">
           <div class="hospital_info">
             <div class="hospital_title">
               {{item.hosname}}
             </div>
             <div class="hospital_level_time">
               <span> <svg t="1709189899312" class="icon" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="4247" width="16" height="16"><path
                   d="M192.07 447.3m63.63 0l0 0q63.63 0 63.63 63.63l0 192.14q0 63.63-63.63 63.63l0 0q-63.63 0-63.63-63.63l0-192.14q0-63.63 63.63-63.63Z" fill="#999999" p-id="4248"></path><path d="M449.43 320.29m63.63 0l0 0q63.63 0 63.63 63.63l0 319.16q0 63.63-63.63 63.63l0 0q-63.63 0-63.63-63.63l0-319.16q0-63.63 63.63-63.63Z" fill="#999999" p-id="4249"></path><path d="M703.34 193.2m63.63 0l0 0q63.63 0 63.63 63.63l0 446.24q0 63.63-63.63 63.63l0 0q-63.63 0-63.63-63.63l0-446.24q0-63.63 63.63-63.63Z" fill="#999999" p-id="4250"></path></svg>{{item.param.hostypeString}}</span>
               <span><svg t="1709189941047" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="5503" width="16" height="16"><path
                   d="M931.2 518.4c0-233.6-188.8-419.2-419.2-419.2-233.6 0-419.2 188.8-419.2 419.2 0 137.6 67.2 259.2 169.6 336l-57.6 51.2c-9.6 9.6-12.8 25.6-3.2 35.2 9.6 9.6 25.6 12.8 35.2 3.2l70.4-57.6c60.8 35.2 131.2 54.4 208 54.4 80 0 153.6-22.4 214.4-60.8 0 0 0 0 3.2 3.2l73.6 60.8c9.6 9.6 25.6 6.4 35.2-3.2 9.6-9.6 6.4-25.6-3.2-35.2l-64-54.4C867.2 774.4 931.2 652.8 931.2 518.4zM512 889.6c-204.8 0-371.2-166.4-371.2-371.2s166.4-371.2 371.2-371.2 371.2 166.4 371.2 371.2S716.8 889.6 512 889.6z" p-id="5504"></path><path d="M208 96c-9.6-9.6-25.6-9.6-35.2 0l-118.4 118.4c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l118.4-118.4C217.6 121.6 217.6 105.6 208 96z" p-id="5505"></path><path d="M969.6 211.2l-118.4-115.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l118.4 115.2c9.6 9.6 25.6 9.6 35.2 0C979.2 236.8 979.2 220.8 969.6 211.2z" p-id="5506"></path><path d="M707.2 300.8l-144 128c0 0 0 3.2-3.2 3.2-12.8-3.2-22.4-6.4-35.2-6.4-12.8 0-22.4 3.2-32 6.4 0-3.2-3.2-3.2-3.2-6.4l-92.8-83.2c-9.6-9.6-25.6-9.6-35.2 3.2-9.6 9.6-9.6 25.6 3.2 35.2l89.6 80c-16 19.2-28.8 41.6-28.8 70.4 0 54.4 44.8 102.4 102.4 102.4 54.4 0 102.4-44.8 102.4-102.4 0-25.6-9.6-48-25.6-67.2l140.8-124.8c9.6-9.6 9.6-25.6 3.2-35.2C732.8 294.4 716.8 294.4 707.2 300.8zM524.8 582.4c-28.8 0-51.2-22.4-51.2-51.2 0-28.8 22.4-51.2 51.2-51.2 28.8 0 51.2 22.4 51.2 51.2C576 556.8 553.6 582.4 524.8 582.4z" p-id="5507"></path></svg>每天{{item.bookingRule?.releaseTime}}放号</span>
             </div>
           </div>
           <div class="hospital_img">
             <img :src="`data:image/jpeg;base64,${item.logoData}`" alt="">
           </div>
         </div>

     </el-card>
   </div>

</template>

<script setup lang="ts">
//接收父组件传过来的props
defineProps(['hospitalArr'])
import {useRouter} from "vue-router";
const router=useRouter()
const goDetail=(item)=>{
  router.push({
    path:'/hospital/register',
   query:{
      hoscode:item.hoscode
    }
  })
}
</script>

<style scoped lang="scss">
 .hospital{
   margin-top: 40px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   .box-card{
     width: 48%;
     height: 100px;
     margin-bottom: 10px;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
     &:hover{
        cursor: pointer;
     }
   }
   .card{
     width: 100%;
     height: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .hospital_info{
       width: 360px;
       height: 100px;
       display: flex;
       flex-wrap: wrap;

       .hospital_title{
         width: 100%;
         height: 50%;
         padding-top: 20px;
       }
       .hospital_level_time{
         width: 80%;
         height: 50%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         span{
           color: #999;
           font-size: 14px;
           display: flex;
           justify-content: center;
           align-items: center;


         }

       }

     }
     .hospital_img{
       width: 80px;
       height: 100px;
       display: flex;
       justify-content: center;
       align-items: center;
       img{
         width:80px;
         height: 80px;
         border-radius: 100%;
       }
     }
   }
 }
</style>